<template>
  <div class="phone">
    <div class="header">
      <van-icon class="left" name="arrow-left" @click="$router.go(-1)" />
      <span>注册界面</span>
    </div>
    <div class="login">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="formData.nickname"
            autocomplete="off"
            name="昵称"
            placeholder="输入昵称"
          >
            <template #left-icon>
              <i class="iconfont icon-shouji"></i>
            </template>
          </van-field>
          <van-field
            v-model="formData.phone"
            autocomplete="off"
            name="手机号"
            placeholder="输入手机号"
            @blur="verification"
          >
            <template #left-icon>
              <i class="iconfont icon-shouji"></i>
            </template>
          </van-field>
          <van-field
            v-model="formData.password"
            type="password"
            autocomplete="off"
            name="密码"
            placeholder="输入密码"
          >
            <template #left-icon>
              <i class="iconfont icon-jiesuo"></i> </template
          ></van-field>
          <van-field
            v-model="formData.captcha"
            center
            autocomplete="off"
            clearable
            placeholder="请输入短信验证码"
          >
            <template #left-icon>
              <i class="iconfont icon-jiesuo"></i>
            </template>
            <template #button>
              <div class="captcha" @click="getCaptchaSent">获取验证码</div>
            </template>
          </van-field>
        </van-cell-group>

        <div
          style="margin: 16px"
          :class="formData.phone && formData.password ? '' : 'btn'"
        >
          <van-button round block type="danger" @click="register">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { getRegisterCellphone, getExistenceCheck } from "@/api/register.js";
import { getCaptchaSent } from "@/api/login.js";

export default {
  data() {
    return {
      formData: {
        nickname: "",
        phone: "",
        password: "",
        captcha: null,
      },
    };
  },
  methods: {
    async register() {
      const data = await getRegisterCellphone(this.formData);
      console.log(data);
    },
    // 获取验证码
    getCaptchaSent() {
      // 请求接口验证码
      console.log(this.formData.phone);
      getCaptchaSent({ phone: this.formData.phone }).then((data) => {
        if (data.data) {
          this.$toast("验证码发送成功");
        } else {
          this.$toast("验证码发送失败");
        }
      });
    },
    async verification() {
      // 1.验证手机号码
      let reg =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (!reg.test(this.formData.phone)) {
        this.$toast("请输入正确手机号码");
        return;
      }
      const { exist } = await getExistenceCheck({ phone: this.formData.phone });
      console.log(exist);
      if (exist == 1) {
        this.$toast("该手机号已经注册");
      } else {
        this.$toast("该手机号可以进行注册");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.phone {
  height: 100vh;
  background-color: #fff;
  position: relative;
  z-index: 99;
  .header {
    position: relative;
    width: 100%;
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    span {
      position: absolute;
      left: 0;
      right: 0;
      width: 70px;
      margin: auto;
      height: 50px;
      line-height: 50px;
    }
  }
  .login {
    margin-top: 30px;
    height: 100%;
    padding-bottom: 30px;
    .van-field {
      height: 43px;
      background: rgba(0, 0, 0, 3%);
      border-radius: 25px;
      margin-bottom: 18px;
      font-size: 16px;
      .captcha {
        margin-top: 0;
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        color: #ff3a3a;
      }
    }
    .btn {
      opacity: 0.6;
    }
    .van-button {
      margin-top: 22px;
      height: 40px;
      border: 0;
    }
  }
}
</style>
